﻿@using RMS.EF.Model
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel-body">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">搜索栏</div>
            <div class="panel-body">
                <form id="searchForm" class="form-inline" role="form" onsubmit="search(); return false;">
                    <div class="form-group">
                        <label for="searchValue">搜索</label>
                        <input type="text" class="form-control" id="searchValue" name="searchValue" maxlength="50" placeholder="键或描述" />
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select id="status" name="status" class="form-control">
                            <option value="@(E_Status.All)">--全部--</option>
                            <option value="@(E_Status.Disable)">不可用</option>
                            <option value="@(E_Status.Enable)">可用</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">搜索</button>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="toolbar" class="btn-group" role="group" style="margin-bottom:10px;">
            <button type="button" class="btn btn-success" onclick="add()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button type="button" class="btn btn-danger" onclick="multidel()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
    </div>
    <div class="row">
        <div class="dataTable_wrapper">
            <table class="table table-bordered table-striped table-hover" id="mainTable"></table>
        </div>
    </div>
</div>

@section scripts{
    <!--文字信息-->
    <script>
        var tableurl = "@Url.Action("ListGetData")";
        var delurl = "@Url.Action("Delete")";
        var editurl = "@Url.Action("Edit")";
        var title = {
            Id: "Id",
            Key: "键",
            Value: "值",
            Description: "描述",
            Status: "状态",
            CreationTime: "创建时间",
            LastUpdateTime: "修改时间",
            Operation: "操作"
        };
        var msg = {
            sel: "请选择一条数据",
            delconfirm: "您确定要删除这条数据吗？",
            add: "新增配置",
            edit: "编辑配置",
            del:"删除配置",
            multidelconfirm: "您确定要删除这些数据吗？",
            disable:"不可用",
            enable:"可用",
        };
    </script>
    <script>
        var table;
        //表格初始化
        $(function () {
            var data = {};
            $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
            table = $("#mainTable").datatablesSet({
                ajax: { url: tableurl, data: data },
                ordering: true,
                order: [[1, 'asc']],
                columns: [
                          {
                              data: 'Id', title: '<input type="checkbox" id="sel_all" onclick="sel_all()"/>', className: "text-center", orderable: false, width: "10px",
                              createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html('<input type="checkbox" id="sel_' + cellData + '" name="selId" value="' + cellData + '" />');
                              }
                          },
                          {
                              data: 'Id', title: title.Id
                          },
                          {
                              data: 'Key', title: title.Key
                          },
                          {
                              data: 'Value', title: title.Value
                          },
                          {
                              data: 'Description', title: title.Description
                          },
                          {
                              data: 'Status', title: title.Status, createdCell: function (cell, cellData, rowData, row, col) {
                                  switch (cellData) {
                                      case 0:
                                          $(cell).html(msg.disable);
                                          break;
                                      case 1:
                                          $(cell).html(msg.enable);
                                          break;
                                      default:
                                          break;
                                  }
                              }
                          },
                          {
                              data: 'CreationTime', title: title.CreationTime, createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                              }
                          },
                          {
                              data: 'LastUpdateTime', title: title.LastUpdateTime, createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                              }
                          },
                          {
                              data: 'Id', title: title.Operation, orderable: false, className: "text-center", createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html('<a href="javascript:void(0);" title="' + msg.edit + '" onclick="edit(\'' + cellData + '\')"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></a>')
                                    .append('&nbsp;|&nbsp;')
                                    .append('<a href="javascript:void(0);" title="' + msg.del + '" onclick="del(\'' + cellData + '\')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></a>');
                              }
                          }
                ]
            }).on('xhr.dt', function () {//调用ajax获取数据时清除全选按钮选中状态
                $("#sel_all").prop("checked", false);
            });
        });
        //表格搜索
        function search() {
            var data = {};
            $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
            $("#mainTable").datatablesReAjax(tableurl, data, null, true);
        }
        //删除
        function del(id) {
            $.confirmAjax(msg.delconfirm, { url: delurl, data: { Id: id }, search: function () { table.ajax.reload(null, false); } });
        }
        //新增
        function add() {
            $.modalBox(msg.add, { url: editurl, search: function () { table.ajax.reload(null, false); } });
        }
        //修改
        function edit(id) {
            $.modalBox(msg.edit, { url: editurl, data: { id: id }, search: function () { table.ajax.reload(null, false); } });
        }
        //列表全选
        function sel_all() {
            $("#mainTable").find("input:checkbox").each(function () {
                $(this).prop("checked", $("#sel_all").is(':checked'));
            });
        }
        //批量删除(其他批量操作也可参考)
        function multidel() {
            var selarry = [];
            $("input:checkbox[name='selId']:checked").each(function () {
                selarry.push($(this).val());
            });
            if (selarry.length > 0) {
                var selId = selarry.join("','");
                $.confirmAjax(msg.multidelconfirm, { url: delurl, data: { id: selId }, search: function () { table.ajax.reload(null, false); } });
            } else {
                toastr.warning(msg.sel);
            }
        }
    </script>
}


